<!--
 * @Description: 限时秒杀功能设置
 * @Author: liyujie
 * @Date: 2021/08/18
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/08/18
-->
<template>
    <section class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <page-header title="功能设置">
                <template slot="header-right">
                    <div
                        class="back"
                        @click="handleRoute('seckillActivityList')"
                    >
                        返回
                    </div>
                </template>
            </page-header>
            <div>
                <div class="form-view">
                    <!--表单-->
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        label-position="right"
                        ref="ruleForm"
                        label-width="164px"
                        class="form-wrap"
                        @submit.native.prevent
                    >
                        <div class="form-title">APP端设置</div>
                        <el-form-item
                            label="活动banner"
                            prop="title"
                        >
                            <el-upload
                                :show-file-list="false"
                                action="noAction"
                                class="upload-view"
                                :http-request="(e) => handleUpload(e, 'app_banner')"
                                accept="image/*"
                                drag
                            >
                                <img
                                    v-if="ruleForm.app_banner"
                                    :src="ruleForm.app_banner"
                                >
                                <i
                                    class="el-icon-upload"
                                    v-if="!ruleForm.app_banner"/>
                                <div
                                    class="el-upload__text"
                                    v-if="!ruleForm.app_banner">将文件拖到此处，或<em>点击上传</em></div>
                                <div
                                    class="el-upload__tip"
                                    slot="tip"
                                >
                                    <el-button
                                        type="text"
                                        style="margin-right: 10px"
                                        v-if="ruleForm.app_banner"
                                        @click="removeBanner"
                                    >移除</el-button>
                                    格式支持jpg、png、jpeg；尺寸：710*280px，展示在APP端
                                </div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item
                            label="banner跳转链接"
                            prop="app_banner_app_action"
                        >
                            <app-action
                                :show="false"
                                :action="JSON.stringify(ruleForm.app_banner_app_action)"
                                style="width: 469px"
                                class="app-action"
                                v-if="init"
                                @action="getAction"
                            />
                        </el-form-item>
                        <div
                            class="form-title"
                            style="margin-top: 24px"
                        >活动招商协议</div>
                        <el-form-item
                            label="活动招商协议"
                            class="is-required"
                        >
                            <ueditor
                                :default-value="ruleForm.shop_rule"
                                ref="ueditor"
                                style="width: 862px"
                            />
                        </el-form-item>
                        <el-form-item>
                            <div class="ueditor-tips">
                                <span>注意：在输入招商协议的时候请仔细编写协议的段落样式，此处设置的段落样式、字体样式将会在商家后台报名处展示</span>
                                <el-button
                                    size="medium"
                                    @click="handlePreview"
                                >
                                    预览协议
                                </el-button>
                            </div>
                        </el-form-item>
                        <div class="form-footer">
                            <el-form-item
                                label="秒杀活动状态"
                                label-width="128px"
                            >
                                <el-switch
                                    v-model="ruleForm.status"
                                    :active-value="1"
                                    :inactive-value="0"
                                    active-text="开启"
                                    inactive-text="关闭"
                                />
                                <span
                                    class="form-tips"
                                    style="margin-left: 26px"
                                >开启表示：整个秒杀活动上架，关闭表示：将整个秒杀活动下架</span>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>

                <!-- button -->
                <div class="footer">
                    <el-button
                        size="medium"
                        type="default"
                        @click="handleCancel()"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="handleSubmit()"
                    >
                        保存
                    </el-button>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import {back} from '@/mixin/back';
import {deepClone} from "@/assets/js/utils";
import ueditor from '@/components/common/ueditor.vue';
import AppAction from "@/components/active/app-action";

const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;

export default {
    name: 'SeckillActivityConfig',
    mixins: [back],
    components: {AppAction, ueditor},
    data() {
        return {
            ruleForm: {
                app_banner: '',
                app_banner_app_action: {},
                shop_rule: '',
                status: 1,
            },
            rules: {},
            init: false,
            authResult: {}
        };
    },
    computed: {},
    filters: {},
    watch: {},
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'},{title: '活动管理'},{title: '限时秒杀'},
            {title: '活动列表', path: '/student/seckill-activity-list'},
            {title: '功能设置'}]);
        this.authResult = this.$route.meta.authResult;
        this.getDetailData();
    },

    methods: {

        /**
         * @description 获取数据
         */
        getDetailData() {
            this.$post('/student/shop_goods_flash_sale_activity%5Cget_config', {}, resp => {
                if (resp.code === 1) {
                    this.ruleForm = resp.data;
                    this.$set(this.ruleForm, 'app_banner_app_action', JSON.parse(resp.data.app_banner_app_action));
                    this.$refs.ueditor.setContent(resp.data.shop_rule);
                    this.init = true;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * @description 提交
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.ruleForm.shop_rule = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';
                    let params = deepClone(this.ruleForm);

                    if(!params.shop_rule) {
                        this.$notify({
                            title: '提示',
                            message: '活动招商协议不能为空',
                            type: 'warning'
                        });
                        return;
                    }
                    params.app_banner_app_action = JSON.stringify(params.app_banner_app_action);
                    this.$post('/student/shop_goods_flash_sale_activity%5Cset_config', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.$router.push({
                                name: 'seckillActivityList'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                } else {
                    // 校验不通过
                    if(document.getElementsByClassName('el-form-item__error').length > 0){
                        this.$notify.warning({
                            title: '提示',
                            message: document.getElementsByClassName('el-form-item__error')[0].innerText
                        });
                    }
                    return false;
                }
            });
        },

        /**
         * @description 返回
         */
        handleCancel() {
            this.$zdConfirm('离开此页面后，已填写的信息将不会保存，确认离开此页面吗？', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push({
                    name: 'seckillActivityList'
                });
            });
        },

        /**
         * 文件上传
         * @param e
         * @param type
         */
        handleUpload(e, type) {
            let file = new FormData();

            file.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: file,
                progress: e.onProgress,
                success: resp => {
                    if(resp.code === 1) {
                        this.ruleForm[type] = resp.data.url;
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                }
            });
        },

        /**
         * 上传图片之前 图片大小限制
         * @param file
         * @returns {boolean}
         */
        beforeUploadImage(file) {
            let type = ['image/jpeg', 'image/png', 'image/jpg'],
                isType = type.includes(file.type),
                isLt = file.size / 1024 < 500;

            if (!isType) {
                this.$notify({
                    title: '提示',
                    message: '格式仅支持jpg、jpeg、png',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if (!isLt) {
                this.$notify({
                    title: '提示',
                    message: `图片大小不能超过500kb`,
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            return isType && isLt;
        },

        /**
         * 预览
         */
        handlePreview() {
            let content = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';

            localStorage.setItem('ACTIVITY_AGREEMENT', content);
            const routeData = this.$router.resolve({
                name: 'activityAgreementPreview',
            });

            window.open(routeData.href, 'activityAgreementPreview');
        },

        /**
         * @description 获取app_banner_app_action
         */
        getAction (action) {
            let appAction = JSON.parse(action);

            console.log('appAction', appAction);
            this.ruleForm.app_banner_app_action = appAction;
        },

        /**
         * 移除banner
         */
        removeBanner() {
            this.init = false;
            this.ruleForm.app_banner = '';
            this.ruleForm.app_banner_app_action = {};
            this.$nextTick(() => {
                this.init = true;
            });
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 4px;
        }

        .back {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            cursor: pointer;
        }
    }

    /deep/ .el-form {
        .is-required {
            .el-form-item__label {
                &:before {
                    content: "*";
                    display: inline-block;
                    color: #F56C6C;
                }
            }
        }

        .image-label {
            .el-form-item__label {
                margin-top: 40px;
            }
        }
    }

    .form-view {
        background: #FBFBFB;
        border-radius: 2px;
        border: 1px solid #EEEEEE;
        margin: 24px 32px;
        box-sizing: border-box;
        padding: 32px 32px 100px;
        position: relative;

        .form-tips {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-left: 12px;
        }

        .form-title {
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            padding-bottom: 12px;
            border-bottom: 1px solid #E9E9E9;
            margin-bottom: 24px;
            margin-top: 52px;

            &:first-of-type {
                margin-top: 0;
            }
        }
        /deep/ .app-action {
            width: 469px;
            .el-form {
                width: 469px;
                .action-cascader {
                    width: 469px!important;
                }
                ._content_input {
                    width: 469px!important;
                }
            }
        }

        .form-footer {
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            position: absolute;
            left: 0;
            bottom: 0;
            border-top: 1px solid #E9E9E9;
            /deep/ .el-form-item {
                margin-bottom: 0;
                &__label {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
            }
            /deep/ .el-switch__label {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                &.is-active {
                    color: #20A0FF;
                }
            }
        }

        .ueditor-tips {
            width: 862px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FF8E39;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .upload-view {
            display: flex;
            align-items: center;
            /deep/ .el-upload {
                width: 469px;
                height: 195px;
                margin-top: 12px;

                .el-upload-dragger {
                    width: 469px;
                    height: 195px;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    .el-icon-upload {
                        font-size: 48px;
                        color: #C0C4CC;
                        margin: 0 10px 0 0;
                    }

                    .el-upload__text {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        line-height: 14px;
                    }
                }
            }
            .el-upload__tip {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-left: 12px;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    /*footer*/

    .footer {
        box-sizing: border-box;
        padding-left: 176px;
        margin-top: 8px;
        margin-bottom: 52px;

        .el-button {
            width: 120px;
            margin: 0 16px 12px;
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 0;
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }

    /deep/ .el-table__fixed-right {
        right: 6px !important;
    }
    /deep/ .tips-textarea {
        .el-textarea__inner {
            padding: 24px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 22px;
        }
    }
    /deep/.edui-default {
        .edui-editor {
            width: 862px!important;
        }
    }
}
</style>
